<template>
<div class="bigData_bg flex-column">
<!--  head-->
  <el-container>
  <el-header>
    <div class="head flex-row justify-between">
      <div class="flex-row align-center">
        <img src="../../../assets/img/bigData/logo.png" alt="" style="width: 79px;height: 79px;">
        <div class="font-44 bold text-white ml-1">陕西省健康科普资源库</div>
        <div class="flex-row align-center tab-box">
          <div class="font-24 bold text-white px-5 py-1 head-tab cursor" :class="{'head-tab-select':tabIndex==0}" @click="tabIndex=0">综合视图</div>
          <div class="font-24 bold text-white px-5 py-1 head-tab cursor ml-3" :class="{'head-tab-select':tabIndex==1}" @click="tabIndex=1">专家视图</div>
          <div class="font-24 bold text-white px-5 py-1 head-tab cursor ml-3" :class="{'head-tab-select':tabIndex==2}" @click="tabIndex=2">资源视图</div>
        </div>
      </div>
      <div class="flex-row">
        <div class="font-16 mt-05" style="color: #17B0F7">{{currentDate}}</div>
        <div class="font-24 text-main ml-2">{{currentTime}}</div>
      </div>
    </div>
  </el-header>
<!--  main-->
  <el-main>
    <BigDatapage1 v-if="tabIndex ==0"></BigDatapage1>
    <BigDatapage2 v-if="tabIndex ==1"></BigDatapage2>
    <BigDatapage3 v-if="tabIndex ==2"></BigDatapage3>
  </el-main>
  </el-container>
</div>
</template>

<script>
import BigDatapage1 from './bigDatapage1'
import BigDatapage2 from './bigDatapage2'
import BigDatapage3 from './bigDatapage3'
export default {
  components: {
    BigDatapage1,
    BigDatapage2,
    BigDatapage3
  },
  name: 'bigData1',
  data () {
    return {
      tabIndex: 0,
      currentDate: '',
      currentTime: '',
    }
  },
  mounted () {
    setInterval(() => {
      this.currentDate = new Date().toLocaleDateString()
      this.currentTime = new Date().toLocaleTimeString()
    }, 1000)
  },
  methods: {
  }
}
</script>

<style scoped>
@import "../../../assets/scss/pages/data.scss";
.text-main{
  color: #00D8FF;
}
.bigData_bg{
  width: 100%;
  height: 100%;
  background: url("../../../assets/img/bigData/bg.png");
  background-size: 100% 100%;
}
/deep/.el-container{
  height: 100%;
}
/deep/.el-header{
  height: 1.3rem !important;
  padding: 0!important;
}
.head{
  background: url("../../../assets/img/bigData/head.png");
  background-size: 100% 110%;
  background-position-x: -.1rem;
  height: 100%;
}
.tab-box{
  margin: .5rem 0 0 2rem
}
.head-tab{
  background: url("../../../assets/img/bigData/btn.png");
  background-size: 100% 100%;
}
.head-tab-select{
  background: url("../../../assets/img/bigData/btnselect.png");
  background-size: 100% 100%;
}

/deep/.el-main{
  padding: 10px !important;
}
</style>
